<template>
  <div class="filterWrapper">
    <el-row v-if="options.assets">
      <el-col :span="4" class="filterItem">
        <div class="price">
          <div>价格</div>
          <div>0-4000</div>
        </div>
        <el-slider
          v-model="price"
          :max="4000"
          @change="priceChange()"
        ></el-slider>
      </el-col>
      <el-col :span="4" class="filterItem">
        <div>住宿等级</div>
        <el-select
          v-model="levelList"
          multiple
          collapse-tags
          placeholder="请选择"
          size="mini"
          @change="levelChange()"
        >
          <el-option
            v-for="level in options.levels"
            :key="level.id"
            :label="level.name"
            :value="level.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="filterItem">
        <div>住宿类型</div>
        <el-select
          v-model="typeList"
          multiple
          collapse-tags
          placeholder="请选择"
          size="mini"
          @change="typeChange()"
        >
          <el-option
            v-for="type in options.types"
            :key="type.id"
            :label="type.name"
            :value="type.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="filterItem">
        <div>酒店设施</div>
        <el-select
          v-model="assetList"
          multiple
          collapse-tags
          placeholder="请选择"
          size="mini"
          @change="assetChange()"
        >
          <el-option
            v-for="asset in options.assets"
            :key="asset.id"
            :label="asset.name"
            :value="asset.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="filterItem">
        <div>酒店品牌</div>
        <el-select
          v-model="brandList"
          multiple
          collapse-tags
          placeholder="请选择"
          size="mini"
          @change="brandChange()"
        >
          <el-option
            v-for="brand in options.brands"
            :key="brand.id"
            :label="brand.name"
            :value="brand.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="resetButton">
        <el-button type="primary" @click="resetFilter">撤销条件</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 4000,
      options: {},
      levelList: [],
      typeList: [],
      assetList: [],
      brandList: [],
    };
  },

  methods: {
    // 价格筛选后更新url
    priceChange() {
      let query = { ...this.$route.query };
      query.price_lt = this.price;
      // console.log(query);
      this.$router.replace({
        path: "/hotel",
        query,
      });
    },

    // 酒店星级筛选后更新url
    levelChange() {
      let query = { ...this.$route.query };
      query.hotellevel = this.levelList;
      query.price_lt = this.price;
      // console.log(query);
      this.$router.replace({
        path: "/hotel",
        query,
      });
    },

    // 酒店类型筛选后更新url
    typeChange() {
      let query = { ...this.$route.query };
      query.hoteltype = this.typeList;
      query.price_lt = this.price;
      // console.log(query);
      this.$router.replace({
        path: "/hotel",
        query,
      });
    },

    // 酒店设备筛选后更新url
    assetChange() {
      let query = { ...this.$route.query };
      query.hotelasset = this.assetList;
      query.price_lt = this.price;
      // console.log(query);
      this.$router.replace({
        path: "/hotel",
        query,
      });
    },

    // 酒店品牌筛选后更新url
    brandChange() {
      let query = { ...this.$route.query };
      query.hotelbrand = this.brandList;
      query.price_lt = this.price;
      // console.log(query);
      this.$router.replace({
        path: "/hotel",
        query,
      });
    },

    // 初始化筛选条件
    resetFilter() {
      this.price = 4000;
      this.levelList = [];
      this.typeList = [];
      this.assetList = [];
      this.brandList = [];
    },
  },

  created() {
    this.$axios({
      url: "/hotels/options",
    }).then((res) => {
      // console.log(res.data.data);
      this.options = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.filterWrapper {
  margin: 20px 0;
  border: 1px solid #ccc;
  .filterItem {
    padding: 15px;
    border-right: 1px solid #ccc;
    height: 76px;
    .price {
      display: flex;
      justify-content: space-between;
    }
  }

  .resetButton {
    line-height: 76px;
    text-align: center;
  }
}
</style>